<template>
  <view class="safetyCertification">
    <uni-list class="uni-list">
      <uni-list-item
        v-if="userInfo.hasCertKey"
        :showArrow="true"
        :title="$t('修改认证密码')"
        clickable
        @click="navigateTo('修改认证密码')"
      >
        <u-icon slot="header" name="edit-pen" size="40"></u-icon>
      </uni-list-item>
      <uni-list-item
        v-else
        :showArrow="true"
        :title="$t('设置认证密码')"
        clickable
        @click="navigateTo('设置认证密码')"
      >
        <u-icon slot="header" name="setting" size="40"></u-icon>
      </uni-list-item>
      <uni-list-item
        v-if="userInfo.hasCertKey"
        :note="`${$t('重置成功后,初始认证密码变更为')}:123456`"
        :showArrow="true"
        :title="$t('重置认证密码')"
        clickable
        @click="navigateTo('重置认证密码')"
      >
        <u-icon slot="header" name="reload" size="40"></u-icon>
      </uni-list-item>
      <uni-list-item
        v-if="userInfo.hasCertKey"
        :note="`${$t('开启后')},${app.supportMode.includes('fingerPrint') ? $t('指纹认证和密码认证将会失效') : $t('密码认证将会失效')}`"
        :title="$t('无密码认证')"
        clickable
      >
        <u-icon slot="header" name="info-circle" size="40"></u-icon>
        <u-switch
          slot="footer"
          v-model="app.noPasswordPrint"
          @change="navigateTo('无密码认证', $event)"
        ></u-switch>
      </uni-list-item>
      <uni-list-item
        v-if="userInfo.hasCertKey"
        :note="$t('默认使用密码认证')"
        :title="$t('密码认证')"
        clickable
      >
        <u-icon slot="header" name="lock" size="40"></u-icon>
        <u-switch slot="footer" v-model="switchValue" :disabled="true"></u-switch>
      </uni-list-item>
      <uni-list-item
        v-if="app.supportMode.includes('fingerPrint') === true"
        :note="$t('开启后,默认的密码认证将失效,将使用指纹认证')"
        :title="$t('指纹认证')"
        clickable
      >
        <u-icon slot="header" name="fingerprint" size="40"></u-icon>
        <u-switch
          slot="footer"
          v-model="app.fingerPrint"
          :disabled="app.noPasswordPrint"
          @change="navigateTo('指纹开关', $event)"
        ></u-switch>
      </uni-list-item>
    </uni-list>
    <authComponent
      ref="authComponent"
      :subTitle="auth.subTitle"
      :title="auth.title"
      @close="close"
      @submit="submit"
    ></authComponent>
    <!-- 重置密码 -->
    <u-modal
      ref="uModal"
      v-model="modal.show"
      :async-close="true"
      :title="$t('密码校验')"
      show-cancel-button
      @confirm="confirm"
    >
      <view class="slot-content">
        <u-form ref="uForm" :model="modal.form" label-width="140">
          <u-form-item :label="$t('用户密码')" prop="password">
            <u-input
              v-model="modal.form.password"
              :placeholder="$t('请输入登录密码')"
              type="password"
            />
          </u-form-item>
        </u-form>
      </view>
    </u-modal>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api', 'app'])
  },
  data() {
    return {
      switchValue: true,
      auth: {
        title: '',
        subTitle: this.$t('请输入认证密码，以验证身份')
      },
      modal: {
        show: false,
        form: {
          password: ''
        },
        rules: {
          password: [{ required: true, message: this.$t('请输入登录密码'), trigger: ['change'] }]
        }
      }
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({title: this.$t('安全认证')})
  },
  onShow() {},
  methods: {
    ...mapActions(['SET_FINGERPRINT', 'SET_NOPASSWORDPRINT']),
    close(value) {
      this.$refs.authComponent.showPop(false)
      if (this.auth.title === '指纹开关') {
        this.app.fingerPrint = !this.app.fingerPrint
      } else if (this.auth.title === '无密码认证') {
        this.app.noPasswordPrint = !this.app.noPasswordPrint
      }
    },
    submit(value) {
      this.$refs.authComponent.showPop(false)
      if (this.auth.title === '修改认证密码') {
        this.validate(value)
      } else if (this.auth.title === '指纹开关') {
        this.validate(value)
      } else if (this.auth.title === '无密码认证') {
        if (value === '指纹验证成功') {
          uni.showToast({
            title: this.$t('验证成功')
          })
          this.SET_NOPASSWORDPRINT(this.app.noPasswordPrint)
        } else {
          this.validate(value)
        }
      }
    },
    validate(value) {
      this.$u.post(this.api.GLOBAL_sysUserCert_validate, { certSecretKey: value }).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: this.$t('验证成功')
          })
          if (this.auth.title === '修改认证密码') {
            setTimeout(() => {
              uni.navigateTo({
                url: '../../template/safetyCertification/setPassword/setPassword?title=修改认证密码&subTitle=请输入要修改的密码'
              })
            }, 500)
          } else if (this.auth.title === '指纹开关') {
            this.SET_FINGERPRINT(this.app.fingerPrint)
          } else if (this.auth.title === '无密码认证') {
            this.SET_NOPASSWORDPRINT(this.app.noPasswordPrint)
          }
        } else {
          this.close()
        }
      })
    },
    navigateTo(text, event) {
      if (text === '设置认证密码') {
        uni.navigateTo({
          url: `../../template/safetyCertification/setPassword/setPassword?title=${this.$t('设置认证密码')}&subTitle=${this.$t('请输入认证密码，以验证身份')}`
        })
      } else if (text === '修改认证密码') {
        this.auth.title = '修改认证密码'
        setTimeout(() => {
          this.$refs.authComponent.showPop(true)
        }, 100)
      } else if (text === '指纹开关') {
        this.auth.title = '指纹开关'
        setTimeout(() => {
          this.$refs.authComponent.showPop(true)
        }, 100)
      } else if (text === '重置认证密码') {
        this.modal.show = true
        setTimeout(() => {
          this.$refs.uForm.setRules(this.modal.rules)
          this.$refs.uForm.resetFields()
        }, 200)
      } else if (text === '无密码认证') {
        this.auth.title = '无密码认证'
        setTimeout(() => {
          this.$refs.authComponent.showPop(true, '无密码认证开启')
        }, 100)
      }
    },
    confirm() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.sysUserCertReset()
        } else {
          this.$refs.uModal.clearLoading()
        }
      })
    },
    sysUserCertReset() {
      this.$u
        .post(this.api.GLOBAL_sysUserCert_reset, { pass: this.modal.form.password })
        .then((res) => {
          this.$refs.uModal.clearLoading()
          this.modal.show = false
          if (res.code === 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          } else if (res.code === 404) {
            uni.showToast({
              title: this.$t('重置密码失败') + '(404)',
              icon: 'none'
            })
          }
        })
        .catch((err) => {
          this.$refs.uModal.clearLoading()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.safetyCertification {
  .slot-content {
    padding: 0 30rpx;
  }
}
</style>
